import { nextTick, defineAsyncComponent } from 'vue'
import type { App } from 'vue'
import * as svg from '@element-plus/icons-vue'
import router from '/@/router/index'
import { useThemeConfig } from '/@/stores/themeConfig'
import { verifyUrl } from './toolsValidate'

// 引入组件
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'))

/**
 * 导出全局注册 element plus svg 图标
 * @param app vue 实例
 * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
 */
export function elSvg(app: App) {
    const icons = svg as any
    for (const i in icons) {
        app.component(`ele-${icons[i].name}`, icons[i])
    }
    app.component('SvgIcon', SvgIcon)
}

/**
 * 设置浏览器标题国际化
 * @method const title = useTitle(); ==> title()
 */
export function useTitle() {
    const { themeConfig } = useThemeConfig()
    nextTick(() => {
        let webTitle = ''
        const globalTitle: string = themeConfig.globalTitle
        const { meta } = router.currentRoute.value
        webTitle = <string>meta.title
        document.title = `${webTitle} - ${globalTitle}` || globalTitle
    })
}

/**
 * 图片懒加载
 * @param el dom 目标元素
 * @param arr 列表数据
 * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
 */
export const lazyImg = (el: string, arr: EmptyArrayType) => {
    const io = new IntersectionObserver((res) => {
        res.forEach((v: any) => {
            if (v.isIntersecting) {
                const { img, key } = v.target.dataset
                v.target.src = img
                v.target.onload = () => {
                    io.unobserve(v.target)
                    arr[key]['loading'] = false
                }
            }
        })
    })
    nextTick(() => {
        document.querySelectorAll(el).forEach((img) => io.observe(img))
    })
}

/**
 * 对象深克隆
 * @param obj 源对象
 * @returns 克隆后的对象
 */
export function deepClone(obj: EmptyObjectType) {
    let newObj: EmptyObjectType
    try {
        newObj = obj.push ? [] : {}
    } catch (error) {
        newObj = {}
    }
    for (const attr in obj) {
        if (obj[attr] && typeof obj[attr] === 'object') {
            newObj[attr] = deepClone(obj[attr])
        } else {
            newObj[attr] = obj[attr]
        }
    }
    return newObj
}

/**
 * 打开外部链接
 * @param val 当前点击项菜单
 */
export function handleOpenLink(val: RouteItem) {
    const { origin, pathname } = window.location
    router.push(val.path)
    if (verifyUrl(<string>val.meta?.isLink)) window.open(val.meta?.isLink)
    else window.open(`${origin}${pathname}#${val.meta?.isLink}`)
}

/**
 * 统一批量导出
 * @method elSvg 导出全局注册 element plus svg 图标
 * @method useTitle 设置浏览器标题国际化
 * @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
 * @method lazyImg 图片懒加载
 * @method globalComponentSize() element plus 全局组件大小
 * @method deepClone 对象深克隆
 * @method isMobile 判断是否是移动端
 * @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
 * @method handleOpenLink 打开外部链接
 */
const other = {
    elSvg: (app: App) => {
        elSvg(app)
    },
    useTitle: () => {
        useTitle()
    },
    lazyImg: (el: string, arr: EmptyArrayType) => {
        lazyImg(el, arr)
    },
    deepClone: (obj: EmptyObjectType) => {
        return deepClone(obj)
    },
    handleOpenLink: (val: RouteItem) => {
        handleOpenLink(val)
    }
}

// 统一批量导出
export default other
